<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title=""
    :footer="null"
    :width="1200"
    :height="680"
    :destroyOnClose="true"
    wrapClassName="stationPopup"
    @height-change="handleHeightChange"
  >
    <a-tabs v-model:activeKey="state.tabActive">
      <a-tab-pane key="1" tab="水情">
        <Hydrograph
          :data="state.tableRowData"
          v-if="state.tabActive === '1'"
          @setProcessTable="setProcessTable"
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="雨情">
        <RainInfo :data="state.tableRowData" v-if="state.tabActive === '2'" />
      </a-tab-pane>
<!--      <a-tab-pane key="3" tab="图像">-->
<!--        <ImageInfo :data="state.tableRowData" v-if="state.tabActive === '3'" />-->
<!--      </a-tab-pane>-->
<!--      <a-tab-pane key="4" tab="视频">-->
<!--        <VideoInfo :data="state.tableRowData" v-if="state.tabActive === '4'" />-->
<!--      </a-tab-pane>-->
      <a-tab-pane key="5" tab="测站信息">
        <StationInfo :data="state.tableRowData" v-if="state.tabActive === '5'" />
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, reactive, provide } from "vue";
import { BasicModal, useModalInner } from "@gui-pkg/antdcomponents";
import Hydrograph from "./hydrograph.vue";
import RainInfo from "./RainInfo.vue";
import ImageInfo from "./ImageInfo.vue";
import VideoInfo from "./VideoInfo.vue";
import StationInfo from "./stationInfo.vue";

const modalHeightValue = ref(680);
const state = reactive({
  stationName: "",
  tabActive: "1",
  tableRowData: null,
  processTable: [],
});

const setProcessTable = (listData) => {
  state.processTable = listData;
};

const [register, { setModalProps }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false });
  state.tableRowData = data.record;
  state.tabActive = "1";
});

// 弹窗高度变化，主要是监听是否点击了全屏
const handleHeightChange = (height: string) => {
  modalHeightValue.value = height;
};
provide("ModalHeightChange", modalHeightValue);
</script>

<style lang="less" rel="stylesheet/less" scoped></style>
